
<script setup lang="ts">
import { ref } from 'vue'
import type { MusicMode } from '@/types/Playing'
const props = defineProps<{
  modes:MusicMode[]
}>()

const rotation = ref(0)

const onClickEmojy = (item: MusicMode) => {
  props.modes.forEach(el => {
    el.select = item.id === el.id
  })
  emit('onItem',item)
}
const onClear = () => {
  rotation.value += 180
}

const emit = defineEmits(['onChange','onKnow','onNew','onItem'])
</script>

<template>
  <div class="header">
    <div class="title">
      听歌模式
    </div>
    <div class="subTitle">
      <span class="vip">VIP</span>
      <span class="txt">正在享受会员精准推荐</span>
    </div>
  </div>

  <div class="change" @click="emit('onChange')">
    <div class="content content-txt">
      <span class="iconfont icon-shuaxin icon" @click="onClear" :style="{ transform: `rotate(${rotation}deg)` }"></span>
      换一批歌听听
    </div>
  </div>

  <div class="change" @click="emit('onKnow')">
    <div class="content content-txt">
      熟悉模式
    </div>
  </div>

  <div class="change" @click="emit('onNew')">
    <div class="content content-txt">
      新鲜模式
    </div>
  </div>

  <div class="emojy">
    <div class="content-emojy">
      <div class="content-emojy-item" v-for="item in modes" :key="item.id" @click="onClickEmojy(item)"
        :class="{ 'content-emojy-item-select': item.select }">
        <div class="iconfont icon-icon_xiaolian-mian emojyicon" :class="{ 'emojyicon-select': item.select }">

        </div>
        <div class="emojy-txt" :class="{ 'emojy-txt-select': item.select }">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  background-color: #000;
  width: 100%;
  height: 26vw;
}

.title {
  color: #fff;
  background-color: transparent;
  font-size: 5vw;
  padding-left: 4vw;
  padding-top: 5vw;
}

.subTitle {
  background-color: transparent;
  padding-left: 4vw;
  padding-top: 2vw;
}

.vip {
  color: #fff;
  font-size: 3vw;
  padding: 0.5vw 1.5vw;
  background-color: #333;
  border-radius: 1vw;
}

.txt {
  font-size: 4vw;
  color: #e0e0e0;
  padding-left: 2vw;
}

.change {
  height: 16vw;
  padding: 2vw 4vw 1vw 4vw;
  display: flex;
  background-color: #000;
  align-content: center;
}

.content {
  flex: 1;
  background-color: #333;
  border-radius: 3vw;
}

.content-txt {
  color: #fff;
  font-size: 4vw;
  line-height: 100%;
  line-height: 13vw;
  text-align: center;
}


.icon {
  display: inline-block;
  color: #fff;
  font-size: 4vw;
  line-height: 13vw;
  transition: transform 0.3s ease;
  /* 添加过渡效果 */
  cursor: pointer; // 鼠标效果
  background-color: transparent;
}

.emojy {
  padding-left: 4vw;
  padding-right: 4vw;
  padding-top: 4vw;
  padding-bottom: 20vw;
  //height: 200vh;
  width: 100%;
  display: flex;
}

.content-emojy {
  background-color: #333;
  flex: 1;
  border-radius: 4vw;
  display: flex;
  flex-wrap: wrap;
  padding: 4vw;
  padding-top: 4vw;
  padding-right: 4vw;
  padding-bottom: 10vw;
  justify-content: space-between;
  row-gap: 4vw;
}

.content-emojy-item {
  border-radius: 2vw;
  height: 20vw;
  width: 30%;
  background-color: transparent;
}

.emojyicon {
  width: 100%;
  height: 60%;
  color: #fff;
  text-align: center;
  font-size: 8vw;
  background-color: transparent;
}

.emojy-txt {
  color: #fff;
  background-color: transparent;
  font-size: 3vw;
  text-align: center;
}

.content-emojy-item-select {
  background-color: #fff;
}

.emojyicon-select {
  color: #000;
}

.emojy-txt-select {
  color: #000;
}


</style>